
<template>

    <div class="goods-list">
  
      <div class="goods-item" v-for="item in goodslist" :key="item.id">
  
        <a href="#">
            <router-link :to="{name: 'goods_info', params: {id: item.id}}">
          <img :src="item.image">
  
          <h1 class="title">{{ item.name }}</h1>
  
          <p class="info">
  
            <span class="price">¥{{ item.price }}</span>
  
            <span class="sell">剩余 {{ item.num }} 件</span>
  
          </p>
        </router-link>
  
        </a>
  
      </div>
      <mt-button class="more" v-if="goodslist.length !== 0" size="large" @click="getMore">加载更多</mt-button>
  
    </div>
  
  </template>
  <script>
  import Vue from 'vue';

// 定义 dateFormat 过滤器，接收一个日期字符串参数
Vue.filter('dateFormat', function(value) {
  // 对日期进行格式化处理，这里只是一个示例，你可以根据自己的需求来实现日期格式化逻辑
  // 假设 value 是一个 YYYY-MM-DD 格式的日期字符串
  return value.replace(/-/g, '/');
});
  
  export default {
  
    props: ['category_id'],
    data () {

        return {

        goodslist: [],

        last_id: 0

}

},
  
    created () {
  
      this.getGoodsList()
  
    },
  
    methods: {
        getGoodsList () {

this.$indicator.open({

  text: '加载中'

})
let params = { last_id: this.last_id, category_id: this.category_id }

this.$http.get('goodslist', { params: params }).then(res => {

    this.$indicator.close()
    if (res.data.code === 1) {

if (res.data.data.length > 0) {

    this.goodslist = this.goodslist.concat(res.data.data)
    this.last_id = res.data.data[res.data.data.length - 1].id

} else if (this.goodslist.length > 0) {

  this.$toast('已经到达底部')

} else {

  this.$toast('列表为空')

}

}

})

        },
        getMore () {

this.getGoodsList()

}
     
  
    }
  
  }
  
  </script>
  <style lang="scss" scoped>

  .goods-list {
  
    display: flex;
  
    flex-wrap: wrap;
  
    padding-left: 10px;
  
    .goods-item {
  
      width: calc(calc(100% / 2) - 10px);
  
      margin: 10px 10px 0 0;
  
      background: #fff;
  
      display: flex;
  
      flex-direction: column;
  
      justify-content: space-between;
  
      border-radius: 10px;
  
      padding: 10px;
  
      img {
  
        width: 100%;
  
      }
  
      .title {
  
        font-size: 14px;
  
        color: #333;
  
        margin: 10px 0;
  
      }
  
      .info {
  
        display: flex;
  
        justify-content: space-between;
  
        margin-bottom: 0;
  
        .price {
  
            color: red;
  
            font-weight: bold;
  
            font-size: 16px;
  
        }
  
        .sell {
  
          font-size: 13px;
  
        }
        .more {

            margin: 15px 0;
        
            font-size: 14px;
        
          }
  
      }
  
    }
  
  }
  
  </style>